<template>
  <div>
    <x-card v-if="hasPerm('foodStore:page')">
      <div
        slot="content"
        class="table-page-search-wrapper"
      >
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col
              :md="5"
              :sm="24"
            >
              <a-form-item label="日需求量">
                <a-select
                  placeholder="请选择日期"
                  v-model="dayTime"
                  @change="handleProvinceChange"
                >
                  <a-select-option
                    v-for="(item,index) in dateRangeArray"
                    :key="index"
                  >{{ item }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col
              :md="17"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="showDayList"
              >查询 </a-button>
            </a-col>
            <a-col
              :md="1"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="$emit('change-to-table')"
              >返回</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </x-card>
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      size="middle"
      :pagination="false"
    />
    <a-modal
      title="日需求量"
      :width="1000"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :labelCol="{ width: '40%' }"
      @cancel="handleCancel"
      @ok="handleSubmit"
    >
      <a-card :bordered="false">
        <table class="table">
          <thead>
            <tr>
              <th style="border: 1px solid rgb(221, 221, 221)">餐次</th>
              <th style="border: 1px solid rgb(221, 221, 221)">菜名</th>
              <th style="border: 1px solid rgb(221, 221, 221)">食物名</th>
              <th style="border: 1px solid rgb(221, 221, 221)">食物需购量/每人（克）</th>
              <th style="border: 1px solid rgb(221, 221, 221)">需购量（斤）</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="border: 1px solid rgb(221, 221, 221)">早餐</td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in zaocan"
                  :key="index"
                >
                  <span>{{ item.recipeName }}</span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in zaocan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="foodNameBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.foodName }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in zaocan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="weightBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.weight }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in zaocan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="xuqiuBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.quantityRequired }}</span></span>
                </div>
              </td>
            </tr>
            <tr>
              <td style="border: 1px solid rgb(221, 221, 221)">早点</td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in zaodian"
                  :key="index"
                >{{ item.recipeName }}</div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in zaodian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="foodNameBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.foodName }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in zaodian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="weightBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.weight }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in zaodian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="xuqiuBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.quantityRequired }}</span></span>
                </div>
              </td>
            </tr>
            <tr>
              <td style="border: 1px solid rgb(221, 221, 221)">午餐</td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wucan"
                  :key="index"
                >{{ item.recipeName }}</div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wucan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="foodNameBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.foodName }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wucan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="weightBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.weight }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wucan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="xuqiuBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.quantityRequired }}</span></span>
                </div>
              </td>
            </tr>
            <tr>
              <td style="border: 1px solid rgb(221, 221, 221)">午点</td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wudian"
                  :key="index"
                >{{ item.recipeName }}</div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wudian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="foodNameBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.foodName }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wudian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="weightBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.weight }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wudian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="xuqiuBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.quantityRequired }}</span></span>
                </div>
              </td>
            </tr>
            <tr>
              <td style="border: 1px solid rgb(221, 221, 221)">晚餐</td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wancan"
                  :key="index"
                >{{ item.recipeName }}</div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wancan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="foodNameBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.foodName }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wancan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="weightBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.weight }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wancan"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="xuqiuBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.quantityRequired }}</span></span>
                </div>
              </td>
            </tr>
            <tr>
              <td style="border: 1px solid rgb(221, 221, 221)">晚点</td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wandian"
                  :key="index"
                >{{ item.recipeName }}</div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wandian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="foodNameBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.foodName }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wandian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="weightBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.weight }}</span></span>
                </div>
              </td>
              <td style="border: 1px solid rgb(221, 221, 221)">
                <div
                  v-for="(item, index) in wandian"
                  :key="index"
                >
                  <span
                    v-for="(v, i) in item"
                    :key="i"
                  ><span
                    class="xuqiuBox"
                    v-for="(v1, i1) in v"
                    :key="i1"
                  >{{ v1.quantityRequired }}</span></span>
                </div>
              </td>
            </tr>
          </tbody>
        </table></a-card>
    </a-modal>
  </div>
</template>
<script>
import { getWeekPurchase, getDayPurchase } from '@/api/modular/dietPlan/index'
import { XCard } from "@/components";
export default {
  props: ['baseInfo'],
  components:{XCard},
  data() {
    return {
      data: [],
      visible: false,
      dayTime: undefined,
      queryParam: {
        PlanWeekRecipesId: undefined,
        Day: undefined,
      },
      afterWeekChecked: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      zaocan: [],
      zaodian: [],
      wucan: [],
      wudian: [],
      wancan: [],
      wandian: [],
      confirmLoading: false,
      dateRangeArray: [],
      columns: [
        {
          title: '周采购清单',
          children: [
            {
              title: '食物名称',
              dataIndex: 'foodName',
              key: 'foodName',
              width: 100,
            },
            {
              title: '星期一',
              dataIndex: 'monday',
              key: 'monday',
              width: 100,
            },
            {
              title: '星期二',
              dataIndex: 'tuesday',
              key: 'tuesday',
              width: 100,
            },
            {
              title: '星期三',
              dataIndex: 'wednesday',
              key: 'wednesday',
              width: 100,
            },
            {
              title: '星期四',
              dataIndex: 'thursday',
              key: 'thursday',
              width: 100,
            },
            {
              title: '星期五',
              dataIndex: 'friday',
              key: 'friday',
              width: 100,
            },
            {
              title: '星期六',
              dataIndex: 'saturday',
              key: 'saturday',
              width: 100,
            },
            {
              title: '星期天',
              dataIndex: 'sunday',
              key: 'sunday',
              width: 100,
            },
          ],
        },
        {
          title: '合计（斤）',
          dataIndex: 'totalQuantity',
          key: 'totalQuantity',
          width: 80,
        },
      ],
    }
  },
  methods: {
    getWeekPurchase() {
      getWeekPurchase(this.baseInfo.id).then((res) => {
        this.data = res.data.foodLists
        const planRange = res.data.planRange
        const startDate = new Date(planRange.split('至')[0])
        const endDate = new Date(planRange.split('至')[1])
        for (let date = startDate; date <= endDate; date.setDate(date.getDate() + 1)) {
          var a = new Date(date).toLocaleDateString()
          a = a.replaceAll('/', '-')
          this.dateRangeArray.push(a)
        }
      })
    },
    async getDayPurchase() {
      this.queryParam.PlanWeekRecipesId = this.baseInfo.id
      this.queryParam.Day = this.dayTime
      const { data: data } = await getDayPurchase(this.queryParam)
      this.dayPurchaseData = data.planDayRecipesDetails
      const arr = data.planDayRecipesDetails.find((item) => {
        return item.type == 0
      })
      this.zaocan = arr.recipes
      const arr1 = data.planDayRecipesDetails.find((item) => {
        return item.type == 1
      })
      this.zaodian = arr1.recipes
      const arr2 = data.planDayRecipesDetails.find((item) => {
        return item.type == 2
      })
      this.wucan = arr2.recipes
      const arr3 = data.planDayRecipesDetails.find((item) => {
        return item.type == 3
      })
      this.wudian = arr3.recipes
      const arr4 = data.planDayRecipesDetails.find((item) => {
        return item.type == 4
      })
      this.wancan = arr4.recipes
      const arr5 = data.planDayRecipesDetails.find((item) => {
        return item.type == 5
      })
      this.wandian = arr5.recipes
    },
    handleProvinceChange(value) {
      this.dayTime = this.dateRangeArray[value];
    },
    showDayList() {
      if(this.dayTime==undefined){
        return this.$message.error('请选择日期')
      }
      this.visible = true
      this.getDayPurchase()
    },
    handleCancel() {
      this.visible = false
    },
    handleSubmit(){
      this.visible = false
    }
  },
  created() {
    this.getWeekPurchase()
  },
}
</script>
<style lang="less" scoped>
.table {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  caption-side: top;
}

.foodNameBox {
  display: block;
}

.weightBox {
  display: block;
}

.xuqiuBox {
  display: block;
}
</style>
